<template>
  <div class="home-big-con-box">
    <div class="myTicket-box">
      <div class="ticket-box">
        <div v-bind:style="{ backgroundImage:'url(' + ticketPurpose.imgUrl + ')', 
      backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover'}" class="ticket">
          <div class="ticket-name">{{ticketPurpose.tTypeName}}
            <div class="ticket-isActive">{{ticketPurpose.isActive?'已激活':'未激活'}}</div>
          </div>
          <!-- isActive -->
          <div class="ticket-equity">
            {{ initDetail(ticketPurpose.purpose) }}
            <div style=" left: -15px;" class="ticket-equity-radius"></div>
            <div style="right:-15px" class="ticket-equity-radius"></div>
          </div>
          <div class="ticket-time">
            {{ $moment(ticketPurpose.stime).format('MM月DD日') }}- {{ $moment(ticketPurpose.etime).format('MM月DD日') }} {{ ticketPurpose.tTypeDate }}
          </div>
          <div class="ticket-time">
            地址:{{ticketPurpose.address}}
          </div>
        </div>
      </div>
      <div class="myTicket-content">
        <div class="information-box">
          <div class="title2-box">
            <p>用票人信息</p>
          </div>
          <div v-if="ticketData.tTypeName" class="ticket2-time">
            门票:{{ticketData.tTypeName}}
          </div>
          <div v-if="ticketData.uName" class="ticket2-time">
            姓名:{{ticketData.uName}}
          </div>
          <div v-if="ticketData.uTel" class="ticket2-time">
            手机号:{{ticketData.uTel}}
          </div>
          <div v-if="ticketData.uEmail" class="ticket2-time">
            邮箱:{{ticketData.uEmail}}
          </div>
          <div v-if="ticketData.activityTitle" class="ticket2-time">
            大会标题:{{ticketData.activityTitle}}
          </div>
          <div v-if="ticketData.province" class="ticket2-time">
            省份:{{ticketData.province}}
          </div>
          <div v-if="ticketData.company" class="ticket2-time">
            公司名称:{{ticketData.company}}
          </div>
          <div v-if="ticketData.address" class="ticket2-time">
            地址:{{ticketData.address}}
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧小二维码 -->
    <div @click="isHide=true">
      <div v-show="codeImg" class="my-ticket-box" @touchmove.prevent>
        <div ref="myboxSmall" class="small-img"></div>
        <p class="small-text">入场二维码</p>
      </div>
    </div>
    <!-- 大二维码展示 -->
    <div class="qrcode-box" v-show="isHide" @click="isHide=false">
      <transition name="fade">
        <div class="mask"></div>
      </transition>
      <div class="code" @touchmove.prevent>
        <div ref="myboxOne" class="hd-img"></div>
        <p class="tip-text">扫描二维码快速进场</p>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      isHide: false,
      // ifNewCode: false, //是否实例化二维码
      qrcodeNew: "", //二维码
      qrcodeNew2: "", //二维码
      codeImg: "", //二进制流二维码数据信息
      TicketInfo: {
        uName: "",
        uTel: "",
        uEmail: "",
        company: ""
      }, //票务信息
      ticketData: {}, //票数据字段
      ticketPurpose: {}
    };
  },
  created() {
    this.$ddapi.setRightFalse();
    this.getTicketInfo();
    // console.log(this.$route.query.parameter);
  },
  mounted() {
    this.getCodeImgFun();
  },
  methods: {
    // 初始化票权益
    initDetail(ticketDetail) {
      try {
        let detail = "";
        let detailArr = JSON.parse(ticketDetail);
        for (let i = 0; i < detailArr.length; i++) {
          if (i < detailArr.length - 1) {
            detail += detailArr[i] + " + ";
          } else {
            detail += detailArr[i];
          }
        }
        return detail;
      } catch (error) {
        return ticketDetail;
      }
    },
    //得到我的票务信息
    getTicketInfo() {
      this.$ddapi.showLoading("获取数据中");
      this.$http
        .post("/api/isv/mob/queryTicketDetailByTicketId", {
          ticketId: this.$route.query.parameter.ticketId
        })
        .then(
          res => {
            this.$ddapi.hidePreloader();
            if (res.data.success) {
              if (res.data.result && res.data.result.data) {
                this.ticketData = res.data.result.data;
                this.ticketPurpose = res.data.result.purpose;
              }
            } else {
              this.$ddapi.toast(res.data.errorMsg || "数据获取失败");
            }
          },
          err => {
            this.$ddapi.hidePreloader();
            this.$ddapi.toast("数据获取失败");
          }
        );
    },
    // 得到二维码图片
    getCodeImgFun() {
      this.$http
        .post("/api/isv/verification/genQR", {
          activityId: this.$route.query.parameter.activityId
        })
        .then(
          res => {
            if (res.data.success) {
              if (res.data.result) {
                this.codeImg = JSON.parse(res.data.result).qrcode;
              }
              this.getNewCode();
            } else {
              this.$ddapi.toast(res.data.errorMsg || "二维码信息获取失败");
            }
          },
          err => {
            this.$ddapi.toast("二维码信息获取失败");
          }
        );
    },
    getCode() {
      this.qrcodeNew.makeCode(this.codeImg);
      this.qrcodeNew2.makeCode(this.codeImg);
    },
    //生成小二维码
    getNewCode: function() {
      this.qrcodeNew2 = new QRCode(this.$refs.myboxSmall, {
        //右侧小二维码
        width: 65,
        height: 65
      });
      this.qrcodeNew = new QRCode(this.$refs.myboxOne, {
        width: 250,
        height: 250
      });
      this.getCode();
    }
  }
};
</script>

<style scoped>
.home-big-con-box {
  width: 100%;
  height: 100%;
}
.myTicket-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
}
.myTicket {
  position: relative;
}
.myTicket-content {
  background: #fff;
  /* width: 100%; */
  /* margin: 24px 24px; */
  padding: 48px 0px;
  /* border-radius: 12px; */
  color: #fff;
}
.ticket2-time {
  font-size: 24px;
  margin-top: 14px;
  text-align: left;
  color: #000;
}
.top-box {
  position: absolute;
  top: 72%;
  left: 7%;
  width: 500px;
}
.information-box {
  /* color: rgb(17, 17, 17); */
  padding: 0px 30px;
}
.title-box {
  display: flex;
  align-items: center;
  padding-bottom: 6px;
}
.title2-box {
  color: #000;
  font-size: 35px;
  text-align: left;
  font-weight: 600;
}
.my-ticket-box {
  /* display: block; */
  font-size: 30px;
  background-color: #c5c4c4;
  opacity: 0.8;
  padding: 10px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.small-img {
  width: 100%;
  height: 100%;
}
.small-text {
  text-align: center;
  color: #000;
  font-size: 22px;
  margin-top: 10px;
}
.home-logo {
  width: 120px;
  height: 120px;
}
.home-logo > img {
  width: 120px;
  height: 120px;
}
.title-text {
  font-size: 46px;
  padding-left: 24px;
}

.job-tit {
  text-align: left;
  font-size: 28px;
  margin-top: 20px;
  padding: 0px 14px;
}
.job-con {
  text-align: left;
  font-size: 26px;
  margin-top: 12px;
  padding: 0px 14px;
}
.code-box {
  width: 100%;
  height: auto;
  border-bottom: 2px dashed #fff;
  margin: 40px 0px;
  position: relative;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.code-radius {
  width: 40px;
  height: 40px;
  background-color: #f3f3f3;
  border-radius: 72px;
  position: absolute;
  bottom: -20px;
  left: -60px;
}
.code-right {
  width: 40px;
  height: 40px;
  background-color: #f3f3f3;
  border-radius: 72px;
  position: absolute;
  bottom: -20px;
  right: -60px;
}
.qrcode-box {
  width: 100%;
  height: 100%;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 11;
}
.code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 22;
}
.hd-img {
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: #fff;
}
.order-d {
  margin-top: 6px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.tip-text {
  text-align: center;
  margin-top: 15px;
  font-size: 36px;
}
.crile-left {
  position: absolute;
  left: -24px;
  bottom: -14px;
  width: 44px;
  height: 44px;
  background-color: #d8d8d8;
  border-radius: 50%;
}
.crile-right {
  position: absolute;
  right: -22px;
  bottom: -14px;
  width: 44px;
  height: 44px;
  background-color: #d8d8d8;
  border-radius: 50%;
}

.ticket-box {
  padding: 26px 20px;
  width: 100%;
  height: auto;
}
.ticket {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  background: #fff;
}
.ticket-isActive {
  position: absolute;
  right: 2px;
  top: 0px;
  font-size: 26px;
}
.ticket-name,
.ticket-equity,
.ticket-time {
  position: relative;
  width: 100%;
  height: auto;
  text-align: left;
  font-size: 30px;
  padding: 0px 10px;
}
.ticket-equity {
  font-size: 20px;
  position: relative;
  padding: 18px 10px;
  border-bottom: 1px dashed #000;
}
.ticket-equity-radius {
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #fff;
}
</style>
